接下來的範例都會以vue.js語法撰寫喔!

情境

在上傳圖檔到server前，須在前端UI上顯示預覽圖像。

上傳預覽的兩種方式

方法1. ObjectURL

流程

1. 上傳檔案後從FileList中取得File物件
2. 建立 URL物件使用createObjectURL將File物件傳入，取得ObjectURL
3. 將取得的ObjectURL放在需預覽的區塊，大功告成

流程

HTML

<input type="file" @change="previewObjectURL">

Javascript

previewObjectURL(e){
  let [file] = e.target.files;
  let _objectURI = window.URL.createObjectURL(file);
  
},//end: uploadFile

codepen sample : 連結

方法2. DataURI

流程

1. 上傳檔案 -> 從FileList中取得File物件
2. 透過FileReader，將檔案內容透過readAsDataURL將檔案轉換成DataURI

HTML

<input type="file" @change="previewDataURI">

Javascript

previewDataURI(e){
  let [file] = e.target.files;
  const reader =  new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = async function(e){
    console.log('filereader',e.target.result);  
  } //end: onloadend
  
},//end: uploadFile

codepen sample : 連結

兩種方式都可以做到預覽的效果，差異在於第二種方式DataURI的做法，是真的讀檔案之後再做呈現，所以速度上會比第一種ObjectURL的慢（ObjectURL是參考在檔案位置給予URL）。所以可以試試看用比較大的圖，再用這兩種方式看看，ObjectURL一定會比DataURI的方式快～

那今天就和大家分享到這邊囉～～